<template>
<view class="container">
  <mvBar :mysNavConfig="mysNavConfig">
    <template #right>
      <uni-icons type="list" size="24" @click="onHistory"></uni-icons>
    </template>
  </mvBar>
  <v-tabs v-model="current" :tabs="tabs" fixed paddingItem="18rpx 130rpx 28rpx" activeColor="#006241" lineColor="#006241" :lineScale="0.1" @change="changeTab"></v-tabs>
  <view class="list-container">
    <scroll-view scroll-y>
      <view class="list-panel" v-if="dataList.length > 0">
          <view v-for="(item,i) in dataList" :key="item.id" @click="handleChosed(item,i)">
            <label class="list-item">
              <view class="radio">
                <radio :value="item.id" color="#006241" :checked="pickOrder.includes(item.orderId)" />
              </view>
              <view>
                <p class="time">{{item.orderTime}}</p>
                <p class="name">{{item.stationName}}</p>
                <p class="address">{{item.stationAddress}}</p>
              </view>
              <view class="price">
                <text>{{item.orderAmount}}</text>元
              </view>
            </label>
          </view>
      </view>
      <empty v-else />
    </scroll-view>
  </view>
  <view class="total-panel">
    <view class="info">{{pickOrder?.length || 0 }}个订单  合计：<text style="color: #006241"><text class="price">{{ orderAmount.toFixed(2) }}</text>元</text></view>
    <view class="radios">
      <radio value="page" :disabled="dataList.length === 0" color="#006241" :checked="dataList.length !== 0 && pickOrder.length === dataList.length" @click="onChoseAll">本页全选</radio>
    </view>
    <view class="btn" @click="handleInvoice()">去开票</view>
  </view>
</view>
</template>

<script>

import mvBar from "@/components/mysNavBar";
import evanRadio from "@/components/evan-radio/evan-radio.vue";
import evanRadioGroup from "@/components/evan-radio-group/evan-radio-group.vue";
import empty from '@/components/empty.vue'
import {getInvoiceOrderList} from "@/api";

export default {
  name: "index",
  components: { mvBar,evanRadio,evanRadioGroup, empty },
  data(){
    return{
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        bgColor:'#FFFFFF',
        navTitle: {
          text: "开具发票",
          color: "#1B1B1B",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: '/static/header/back-b.png',
        // rightIconPath: '/static/header/back-b.png',
      },
      current: 0,
      tabs: ['加油订单', '充电订单'],
      pickOrder: [],
      orderAmount: 0,
      dataList: [
        // {id: 0, name: 'aaa', time: '2025-03-07 22:19:17', val: '12.00'},
        // {id: 1, name: 'bb', time: '2025-03-07 22:19:17', val: '922.00'},
        // {id: 2, name: 'cc', time: '2025-03-07 22:19:17', val: '92.00'},
        // {id: 3, name: 'ddd', time: '2025-03-07 22:19:17', val: '99992.00'},
      ]
    }
  },
  onLoad(){
    this.getList()
  },
  methods: {
    async getList() {
      const params = {
        orderType: this.current + 1,
        pageNum: 1,
        pageSize: 999
      }
      const res = await getInvoiceOrderList({...params})
      if (res.code === 200)
        this.dataList = res.rows
    },
    changeTab(index) {
      this.pickOrder = []
      this.orderAmount = 0
      this.getList()
    },
    handleChosed(data,i){
      const id = data.orderId
      if (!this.pickOrder.includes(id)){
        this.orderAmount += data.orderAmount
        this.pickOrder.push(id)
      }
      else{
        this.pickOrder.splice(this.pickOrder.indexOf(id),1)
        this.orderAmount -= data.orderAmount
      }
    },
    chosedAll(evt){
      const val = evt.detail.value
      if (val==='page')
        this.pickOrder = []
    },
    handleInvoice(){
      if (this.pickOrder.length === 0){
        uni.showToast({title: '请选择开票订单',icon: "error"})
        return false
      }
      uni.navigateTo({
        url:`/pages/personal-center/invoice/invoice-info?orders=${this.pickOrder.join(',')}&orderAmount=${this.orderAmount.toFixed(2)}&orderType=${this.current+1}`
      })
    },
    onHistory(){
      uni.navigateTo({
        url:`/pages/personal-center/invoice/history`
      })
    },
    onChoseAll(){
      if (this.pickOrder.length !== this.dataList.length){
        this.dataList.forEach((item)=>{
          if (!this.pickOrder.includes(item.orderId))
            this.handleChosed(item)
        })
      }else {
        this.pickOrder = []
        this.orderAmount = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  .history{
    font-size: 24upx;
    color: #9D9D9D;
  }
  .list-container{
    .emptyPanel{
      text-align: center;
      padding-top: 180upx;
      image{
        width: 200upx;
        height: 200upx;
        margin-bottom: 16upx;
      }
      .emptyText{
        color: #9D9D9D;
        font-size: 28upx;
      }
      .setBtn{
        margin: 16upx auto;
        width: 140upx;
        font-size: 24upx;
        padding: 14upx 24upx;
        border-radius: 8upx;
        border: 1px solid #006241;
        color: #006241;
      }
    }
    .list-panel{
      padding: 20upx 20upx 160upx;
      .list-item{
        box-sizing: border-box;
        width: 100%;
        border-radius: 24upx;
        background: #FFF;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 24upx 32upx;
        margin-bottom: 20upx;
        position: relative;
        .time,.address{
          color: #6A6A6A;
          font-size: 24upx;
        }
        .address{
          margin-top: 8upx;
        }
        .radio{
          margin-right: 20upx;
        }
        .price{
          position: absolute;
          right: 32upx;
          text{
            font-size: 44upx;
            font-weight: 700;
          }
        }
      }
    }
  }
  .total-panel{
    width: 100%;
    //height: 140upx;
    background: #FFFFFF;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 22upx 32upx 40upx;
    box-sizing: border-box;
    .btn{
      position: absolute;
      right: 24upx;
      top: 40upx;
      background: #006241;
      color: #FFFFFF;
      text-align: center;
      width: 200upx;
      line-height: 80upx;
      border-radius: 60upx;
      font-size: 28upx;
      font-weight: 400;
    }
    .info{
      .price{
        font-size: 40upx;
        font-weight: 700;
        color: #006241;
      }
    }
    .radios{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 16upx;
      radio{
        margin-right: 32upx;
      }
    }
  }
}
</style>